contents | introduction | what | why | cascade | how | statements | selectors | properties | values | advanced

cascading style sheets guide

Properties

If you've ever looked into style sheets a little, you will probably have noticed that most of what we have covered so far is not covered elsewhere in the sort of detail we have gone into. Most tutorials for style sheets concentrate quite heavily on what we are about to look at, Properties. Why does this tutorial go about things differently? Well in many ways, properties is a straightforward subject. We all have a rather good grasp of text styles and page layout, things that can be done with fonts, backgrounds, borders and so on. But to really take advantage of the control over appearance that style sheets gives us, we need to be able to apply the properties well.

The areas we have looked at so far, the Cascade, Inheritance, Statements and Selectors are vital pre-requisites for mastering style. Without a good understanding of them, you'll benefit from the added control over appearance that style sheets give you, but you won't be able to take your web pages to the next level.
More importantly, you won't be able to take advantage of the powerful site management capabilities of style sheets.

But now we come to the fun part, making our sites look more sophisticated. This is no doubt what you've been waiting for.

As with the rest of this guide, this part is long on explanation. Throughout this guide we have been looking to help you master style, to get a really strong grip on the underlying concepts, and the uses of them.
At this point I'll mention again our hands-on tutorial, which aims to give a more practical understanding of how to work with style sheets. You might like to turn there for this practical approach.

I wouldn't worry overly about the finer points of syntax (that is how to write the code to achieve the effects we are about to cover), but concentrate on what can and can't be done with CSS. Why? Well, this is close to a shameless plug, but applications like our own Style Master (you can thank or blame Style Master for bringing you this tutorial) help you get the syntax right, by making it all point and click easy. So you just worry about what you want to do, and don't worry so much about how to do it.

What are Properties?

One more time, let me recap how style sheets work. Follow the bouncing ball. Style sheets are a series of instructions, called statements. Each statement has a selector, which tells a browser which elements on a page are affected by this statement, and a declaration, which tells the browser how to draw these elements. A declaration is a series of properties.

A property has the following form: a property name followed by a value. The property name is one of several dozen keywords which we will look at shortly.

There are several different types of value. Different properties can take different types of these values. Rather than distracting us from the main purpose of this lesson, properties, by taking a look at each of these different kinds of value, you might like to take a detour, or you might like to continue, and use our sidebar on values as a reference source when needed.

The Cascading Style Sheets recommendation divides properties into a number of categories. I won't follow these categories rigorously, but rather group the properties in similar, but differently named categories. The categories of property are:

• Text Style
• Text Layout
• Background
• Border
• Margin
• Padding
• Page Layout
• Element Type

We'll take a look at each of these in turn. Follow each of the links above to read more on the respective sets of properties.

Our explanation follows the CSS1 and CSSP recommendations quite closely, attempting where possible to translate the shorthand of that document into more user friendly terms. (Remember that the recommendation is written for experts in the field to help develop tools, not as an author's guide).
At times I have quoted the recommendation, but this quotation is, for the sake of legibility, not in quotation marks. More normally, I have paraphrased the recommendation, expanding on the terse descriptions there.

All respect goes out to the authors of the original CSS1 and CSSP recommendations. Thanks for making the web a better place.

In this part

Well, we have covered a fair deal of territory in this part, but you'll probably end up using this more as a reference source than as a light read.

Next

We are beginning to bring these proceedings to a close, but before we do we need to talk about how you actually make all of this magic work in your web sites. Integrating style is next.

contents | introduction | what | why | cascade | how | statements | selectors | properties | values | advanced